<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>    
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<c:set var="contextPath" value="${pageContext.request.contextPath}" />    

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="${contextPath}/js/common/jquery-1.6.4.js"></script>
<script type="text/javascript" src="${contextPath}/js/common/jquery.form.js"></script>
<script type="text/javascript">
	/*
		obj의 자식 컨텐츠를 모두 삭제(empty)한 후
		문자열 msg를 TextNode로 생성(createTextNode)한 후 obj에 추가(append)한다.
	*/
	function replaceText(obj, msg){
		$(obj).empty().append(document.createTextNode(msg));
	}
	
	/*
		Ajax 및 이벤트 실행 메서드
		
		submit 버튼을 클릭하면 id가 'form'인 form 요청을 submit 시킨다.
		
		input, radio, checkbox, textarea 등의 태그의 내용들은 jquery form plugin 자바스크립트에 의해 
		알아서 직렬화가 되어 서버에 전송된다.
		
	*/
	function init(){	
		$("#submit").click(
			function(){
				//form 태그의 내용을 ajax로 서버에 전송 및 요청을 보낸다.
				$("#form").ajaxForm({
					
					//응답으로 받은 데이터의 형식을 지정. 서버에게 JSON으로 받는다.
					dataType : "json",
					
					//응답이 성공적으로 이루어졌을 경우 처리할 내용
					//data는 응답 받은 JSON 객체를 말한다.
					success : function(data){
						replaceText("#idMsg", data.idMsg);
						replaceText("#pwdMsg", data.pwdMsg);
						replaceText("#hobbyMsg", data.hobbyMsg);
					}
				});
			}
		);
		return false;
	}
	
	$(document).ready(function(){
		init();
	});
</script>

</head>
<body>
	
	<form id="form" action="${contextPath}/servlet/submitForm" method="post">
		
		아이디 : <input type="text" name="id" id="id" /><span id="idMsg"></span><br />
		비빌번호 : <input type="password" name="password" id="password" /><span id="pwdMsg"></span><br />
		취미 : <span id="hobbyMsg"></span><br />
		<input type="checkbox" name="hobby" value="soccer" />축구
		<input type="checkbox" name="hobby" value="reading" />독서
		<input type="checkbox" name="hobby" value="game" />게임
		<input type="checkbox" name="hobby" value="listening" />음악감상
		<input type="checkbox" name="hobby" value="tv" />TV시청
		<br /> 
		<br />  
		
		<input type="submit" id="submit" value="확인" />
	</form>
	
</body>
</html>